<template>
    <!--添加区域-->
    <div>
        <el-button type="primary" @click="showDialog">添加</el-button>
    </div>
    <!--表格区域-->
    <el-table size="mini" :data="tableData" style="width: 99%">
        <el-table-column prop="roleId" label="角色ID" width="180" />
        <el-table-column prop="roleName" label="角色名称" width="180" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button  type="warning" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button  type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--添加弹框区域-->
    <el-drawer
            v-model="openDrawer"
            title="添加角色"
            size="30%"
            direction="rtl"
            :before-close="drawerClose"
    >
        <div class="item">
            <span>角色名称：</span>
            <div><el-input  v-model="formData.roleName" placeholder="请输入角色名称"></el-input></div>
        </div>
        <div class="item">
            <span></span>
            <el-button type="primary" @click="addForm">添加</el-button>
        </div>
    </el-drawer>
    <!--修改弹框区域-->
    <el-drawer
            v-model="editDrawer"
            title="修改角色"
            size="30%"
            direction="rtl"
            :before-close="editDrawerClose"
    >
        <div class="item">
            <span>角色名称：</span>
            <div><el-input  v-model="formData.roleName" placeholder="请输入角色名称" @change="changeInput"></el-input></div>
        </div>
        <div class="item">
            <span></span>
            <el-button type="primary" @click="editForm">修改</el-button>
        </div>
    </el-drawer>
</template>

<script>
    import api from "../../api";
    import {reactive,toRefs,onMounted} from  'vue'
    import { ElMessageBox,ElMessage } from 'element-plus'
    export default {
        name: "Role",
        setup(){
            let data=reactive({
                // 角色列表
                tableData:[],
                // 添加对话框
                openDrawer:false,
                // 修改对话框
                editDrawer:false,
                // 表单数据
                formData:{
                    roleName:'',
                    roleId:''
                },
            })
           onMounted(()=>{
                getUserList()
            })
            // 关闭对话框
            let drawerClose=()=>{
                data.formData={
                    roleName:'',
                    roleId:''
                }
                data.openDrawer=false
            }
            // 关闭修改对话框
            let editDrawerClose=()=>{
                data.formData={
                    roleName:'',
                    roleId:''
                }
                data.editDrawer=false
            }
            // 获取用户列表
            let getUserList=()=>{
                api.getRoleList().then(res=>{
                    data.tableData=res.data.data
                })
            }
            // 显示弹框
            let showDialog=()=>{
                data.openDrawer=true
            }
            // 添加角色
            let addForm=()=>{
               if (data.formData.roleName===''){
                   ElMessage.warning('请输入内容')
                   return false
               }
                   api.getRoleAdd({roleName:data.formData.roleName}).then(res=>{
                       if (res.data.status===200){
                           ElMessage.success('添加成功')
                           data.openDrawer=false
                           // 清除表单
                           data.formData={
                               roleName:''
                           }
                           // 重新发起请求
                           getUserList()
                       }else {
                           ElMessage.error('添加失败')
                       }
                   })
            }
            // 修改角色
            let editForm=()=>{
            api.getRoleUpdate({
                roleName:data.formData.roleName,roleId:data.formData.roleId
            }).then(res=>{
                if (res.data.status===200){
                    ElMessage.success('修改成功')
                    data.editDrawer=false
                    // 清除表单
                    data.formData={
                        roleName:''
                    }
                    // 重新发起请求
                    getUserList()
                }else {
                    ElMessage.error('修改失败')
                }
             })
            }
            // 域修改
            let handleEdit=(row)=>{
                // 获取当前角色信息给表单数据
                data.formData=row
                data.editDrawer=true
            }
            // 删除用户
            let handleDelete=(row)=>{
                ElMessageBox.confirm(
                    '是否永久删除',
                    '警告',
                    {
                        confirmButtonText: '删除',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                     api.getRoleDelete({roleId:row.roleId}).then(res=>{
                         if (res.data.status===200){
                             ElMessage.success('删除成功')
                         }
                         getUserList()
                     })
                    })
                    .catch(() => {
                        ElMessage.info('取消成功')
                    })

            }
            // 当文本框内容发生变化调用请求
            let changeInput=()=>{
                getUserList()
            }
            return{
                ...toRefs(data),
                addForm,
                showDialog,
                drawerClose,
                handleEdit,
                handleDelete,
                editForm,
                editDrawerClose,
                changeInput
            }
        }
    }
</script>

<style scoped lang="scss">

    .item {
        display: flex;
        font-size: 14px;
        align-items: center;
        margin-bottom: 10px;
        span {
            width: 70px;
            text-align: right;
        }
        div{
            flex: 1;
        }
    }
</style>
